/* 每日课表视图样式 */
.dailyScheduleView {
  @apply w-full space-y-4;
}

.headerCard {
  @apply shadow-sm;
}

.headerContent {
  @apply flex items-center justify-between;
}

.dateControls {
  @apply flex items-center gap-2;
}

.navButton {
  @apply flex items-center justify-center;
}

.datePicker {
  @apply min-w-32;
}

.headerInfo {
  @apply flex items-center gap-3;
}

.weekDay {
  @apply text-lg font-medium text-gray-700;
}

.countBadge :global(.ant-badge-count) {
  @apply bg-blue-500;
}

.contentCard {
  @apply min-h-96;
}

.emptyContainer {
  @apply flex items-center justify-center py-16;
}

.timelineContainer {
  @apply p-4;
}

.scheduleTimeline {
  @apply w-full;
}

.timeSlotContent {
  @apply space-y-3;
}

.timeSlotHeader {
  @apply flex items-center justify-between;
}

.timeSlotLabel {
  @apply text-base font-medium text-gray-900;
}

.timeSlotDuration {
  @apply text-sm text-gray-500;
}

.instanceCards {
  @apply grid gap-3;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.instanceCard {
  @apply w-full;
}

/* 时间轴样式优化 */
.scheduleTimeline :global(.ant-timeline-item-content) {
  @apply min-h-0;
}

.scheduleTimeline :global(.ant-timeline-item-tail) {
  @apply border-l-2 border-blue-200;
}

.scheduleTimeline :global(.ant-timeline-item-head) {
  @apply bg-blue-500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .headerContent {
    @apply flex-col items-start gap-3;
  }
  
  .dateControls {
    @apply w-full justify-center;
  }
  
  .headerInfo {
    @apply w-full justify-between;
  }
  
  .instanceCards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .timeSlotHeader {
    @apply flex-col items-start gap-1;
  }
  
  .timeSlotLabel {
    @apply text-sm;
  }
  
  .timeSlotDuration {
    @apply text-xs;
  }
}

@media (max-width: 480px) {
  .timelineContainer {
    @apply p-2;
  }
  
  .instanceCards {
    gap: 8px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .headerCard,
  .contentCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .weekDay {
    @apply text-gray-200;
  }
  
  .timeSlotLabel {
    @apply text-gray-100;
  }
  
  .timeSlotDuration {
    @apply text-gray-400;
  }
  
  .scheduleTimeline :global(.ant-timeline-item-tail) {
    @apply border-blue-400;
  }
  
  .scheduleTimeline :global(.ant-timeline-item-head) {
    @apply bg-blue-400;
  }
  
  .datePicker :global(.ant-picker) {
    @apply bg-gray-700 border-gray-600;
  }
  
  .datePicker :global(.ant-picker-input > input) {
    @apply text-gray-100;
  }
}